import React, {Component} from 'react';
import NavigationUtil from "../navigator/NavigationUtil";
import DynamicTabNavigator from "../navigator/DynamicTabNavigator";
import {NavigationActions} from "react-navigation";
import {connect} from "react-redux";//其实不一定使用redux，使用Promise + state也可以！
import BackPressComponent from "../common/BackPressComponent";
import CustomTheme from '../page/CustomTheme';
import actions from "../action";
import SafeAreaViewPlus from "../common/SafeAreaViewPlus";
import SplashScreen from "react-native-splash-screen";
import Types from "../action/types";

//https://flow.org/en/docs/react/components/ Using Default Props 默认的Props
type
Props = {};

class HomePage extends Component<Props> {
    constructor(props) {
        super(props);
        //返回按键处理工具类
        this.backPress = new BackPressComponent({backPress: this.onBackPress});
    }

    componentDidMount() {
        console.log("HomePage : componentDidMount");
        this.backPress.componentDidMount();
    }

    componentWillUnmount() {
        console.log("HomePage : componentWillUnmount");
        NavigationUtil.goToPage(this.props, "Init")//需要互回到Init,否则在activity的back键返回后.再次启动,WelcomePage:componentDidMount不执行
        this.backPress.componentWillUnmount();
    }

    /**
     * 处理 Android 中的物理返回键
     * https://reactnavigation.org/docs/en/redux-integration.html#handling-the-hardware-back-button-in-android
     * @returns {boolean}
     */
    onBackPress = () => {
        const {dispatch, nav} = this.props;
        console.log("HomePage: nav.routes[1].index" + nav.routes[1].index);
        //if (nav.index === 0) {
        if (nav.routes[1].index === 0) {//如果RootNavigator中的MainNavigator的index为0，则不处理返回事件
            return false;
        }
        dispatch(NavigationActions.back());//好像走不到这里,而且可能报错??参考 https://www.reactnavigation.org.cn/docs/navigation-actions
        return true;
    };

    renderCustomThemeView() {
        const {customThemeViewVisible, onShowCustomThemeView} = this.props;
        //显示自定义主题
        return (<CustomTheme
            visible={customThemeViewVisible}
            {...this.props}
            onClose={() => onShowCustomThemeView(false)}//调用到mapDispatchToProps的onShowCustomThemeView方法, 发送Types.SHOW_THEME_VIEW消息,最后设置customThemeViewVisible
        />)
    }

    render() {
        const {theme} = this.props;
        //把navigation记录下来,在PopularPage中需要使用这个navigation进行跳转
        NavigationUtil.home_navigation = this.props.navigation;
        return <SafeAreaViewPlus
            enablePlus={false}
            topColor={theme.themeColor}
        >
            <DynamicTabNavigator/>
            {this.renderCustomThemeView()}
        </SafeAreaViewPlus>;
    }
}

const mapStateToProps = state => ({
    nav: state.nav,
    customThemeViewVisible: state.theme.customThemeViewVisible,//设置是否显示自定义 主题
    theme: state.theme.theme,
});

const mapDispatchToProps = dispatch => ({
    onShowCustomThemeView: (show) => dispatch(actions.onShowCustomThemeView(show)),
});

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);//绑定redux,才能向store发送action和接收store中state的变化